<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学生信息表</title>
    <style>
        table {
            border-collapse: collapse;
            /* 边框重叠 */
            border-spacing: 0;
            /* 边框间距 */
            width: 100%;
            /* 表格宽度 */
        }

        th,
        td {
            border: 1px solid #443f3f;
            /* 边框 */
            padding: 5px;
            /* 内边距 */
            text-align: center;
        }

        table tr:not(:first-child) :hover {
            background-color: #f1eded;
        }

        h2 {
            text-align: center;
        }
    </style>
</head>

<body>
    <h2>学生信息表</h2>
    <table>
        <tr>
            <th>序号</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
            <th>家乡</th>
        </tr>
        <script>
            let goods = [{
                order: 1,
                name: '小明',
                age: 18,
                sex: '男',
                adress: '北京'
            }, {
                order: 2,
                name: '小红',
                age: 19,
                sex: '女',
                adress: '上海'
            }, {
                order: 3,
                name: '小张',
                age: 20,
                sex: '男',
                adress: '天津'
            }, {
                order: 4,
                name: '小李',
                age: 21,
                sex: '男',
                adress: '重庆'
            }]

            for (let i = 0; i < goods.length; i++) {
                document.write('<tr>')
                document.write('<td>' + goods[i].order + '</td>')
                document.write('<td>' + goods[i].name + '</td>')
                document.write('<td>' + goods[i].age + '</td>')
                document.write('<td>' + goods[i].sex + '</td>')
                document.write('<td>' + goods[i].adress + '</td>')
                document.write('</tr>')
            }
        </script>
        <!-- <tr>
            <td>1</td>
            <td>小明</td>
            <td>18</td>
            <td>男</td>
            <td>河北</td>
        </tr> -->
    </table>
</body>

</html>